<template>
    <view class="parkingInfoBaseForm">
        <view class="tn-shadow tn-p-sm tn-mb tn-mt">
            <tn-form
                ref="formRef"
                :model="formData"
                label-position="top">
                <tn-form-item prop="isPass">
                    <template #label>
                        <tn-title
                            title="军车是否放行"
                            mode="vLine"
                            sub-title="isPass"
                            assist-color="tn-blue" />
                    </template>
                    <tn-radio-group v-model="formData.isPass">
                        <tn-radio
                            v-for="(item, index) in Dict.dict.COMMON_YES_NO" :key="index"
                            :label="item.value"
                            >{{ item.label }}</tn-radio
                        >
                    </tn-radio-group>
                    <view class="tn-grey_text">默认:是</view>
                </tn-form-item>

                <tn-form-item prop="carPlate">
                    <template #label>
                        <tn-title
                            title="预置车牌前缀"
                            mode="vLine"
                            sub-title="Recharge"
                            assist-color="tn-blue" />
                    </template>
                    <tn-input
                        v-model="formData.carPlate"
                        placeholder="输入车场所在省份"
                        :border="customStyleBorder"
                        :custom-style="customStyleInput"></tn-input>
                    <view class="tn-grey_text"></view>
                </tn-form-item>

                <tn-form-item prop="carPlate">
                    <template #label>
                        <tn-title
                            title="电子支付、商家减免后允许车辆免费停留时间"
                            mode="vLine"
                            sub-title="Recharge"
                            assist-color="tn-blue" />
                    </template>
                    <tn-input
                        v-model="formData.carPlate"
                        placeholder="默认15分钟"
                        :border="customStyleBorder"
                        :custom-style="customStyleInput"></tn-input>
                    <view class="tn-grey_text"></view>
                </tn-form-item>

                <tn-form-item prop="carPlate">
                    <template #label>
                        <tn-title
                            title="优惠是否包含免费时段"
                            mode="vLine"
                            sub-title="Recharge"
                            assist-color="tn-blue" />
                    </template>
                    <view @click="openPicker('noRenewal',Dict.dict.COMMON_YES_NO)">
                        <tn-input
                            style="pointer-events: none"
                            :model-value="Dict.label.COMMON_YES_NO[formData.noRenewal]"
                            placeholder="默认:是" />
                    </view>
                    <view class="tn-grey_text"></view>
                </tn-form-item>

                <tn-form-item prop="carPlate">
                    <template #label>
                        <tn-title
                            title="是否允许商家线上充值"
                            mode="vLine"
                            sub-title="Recharge"
                            assist-color="tn-blue" />
                    </template>
                    <view @click="openPicker('noRenewal',Dict.dict.COMMON_YES_NO)">
                        <tn-input
                            style="pointer-events: none"
                            :model-value="Dict.label.COMMON_YES_NO[formData.noRenewal]"
                            placeholder="默认:否" />
                    </view>
                    <view class="tn-grey_text"></view>
                </tn-form-item>

                <tn-form-item prop="carPlate">
                    <template #label>
                        <tn-title
                            title="电子支付允许支付车类"
                            mode="vLine"
                            sub-title="Recharge"
                            assist-color="tn-blue" />
                    </template>
                    <view @click="openPicker('noRenewal',Dict.dict.COMMON_YES_NO)">
                        <tn-input
                            style="pointer-events: none"
                            :model-value="Dict.label.COMMON_YES_NO[formData.noRenewal]"
                            placeholder="默认:全部允许" />
                    </view>
                    <view class="tn-grey_text"></view>
                </tn-form-item>

                <tn-form-item prop="isPass">
                    <template #label>
                        <tn-title
                            title="收费0元播报"
                            mode="vLine"
                            sub-title="isPass"
                            assist-color="tn-blue" />
                    </template>
                    <tn-radio-group v-model="formData.isPass">
                        <tn-radio
                            v-for="(item, index) in Dict.dict.COMMON_YES_NO" :key="index"
                            :label="item.value"
                            >{{ item.label }}</tn-radio
                        >
                    </tn-radio-group>
                    <view class="tn-grey_text">默认:是</view>
                </tn-form-item>

                <tn-form-item prop="carPlate">
                    <template #label>
                        <tn-title
                            title="进出场默认屏显推送时间"
                            mode="vLine"
                            sub-title="Recharge"
                            assist-color="tn-blue" />
                    </template>
                    <tn-input
                        v-model="formData.carPlate"
                        placeholder=""
                        :border="customStyleBorder"
                        :maxlength="1"
                        :custom-style="customStyleInput"></tn-input>
                    <view class="tn-grey_text">默认:0-不启用，启用-则填写对应秒数，最大不超过180秒</view>
                </tn-form-item>

                <tn-form-item prop="carPlate">
                    <template #label>
                        <tn-title
                            title="无牌车扫码模式"
                            mode="vLine"
                            sub-title="Recharge"
                            assist-color="tn-blue" />
                    </template>
                    <view @click="openPicker('noRenewal',Dict.dict.COMMON_YES_NO)">
                        <tn-input
                            style="pointer-events: none"
                            :model-value="Dict.label.COMMON_YES_NO[formData.noRenewal]"
                            placeholder="默认:全部允许" />
                    </view>
                    <view class="tn-grey_text">默认:不限制，暂只支持C1相机</view>
                </tn-form-item>

                <tn-form-item prop="isPass">
                    <template #label>
                        <tn-title
                            title="是否开启伪车牌判断"
                            mode="vLine"
                            sub-title="isPass"
                            assist-color="tn-blue" />
                    </template>
                    <tn-radio-group v-model="formData.isPass">
                        <tn-radio
                            v-for="(item, index) in Dict.dict.COMMON_YES_NO" :key="index"
                            :label="item.value"
                            >{{ item.label }}</tn-radio
                        >
                    </tn-radio-group>
                    <view class="tn-grey_text">默认:否，系统识别到伪车牌后不开闸，暂只支持ZS相机</view>
                </tn-form-item>

                <tn-form-item prop="carPlate">
                    <template #label>
                        <tn-title
                            title="通道同意车牌业务处理超时事件"
                            mode="vLine"
                            sub-title="Recharge"
                            assist-color="tn-blue" />
                    </template>
                    <tn-input
                        v-model="formData.carPlate"
                        placeholder="默认180秒"
                        :border="customStyleBorder"
                        :maxlength="1"
                        :custom-style="customStyleInput"></tn-input>
                    <view class="tn-grey_text"></view>
                </tn-form-item>

                <tn-form-item prop="isPass">
                    <template #label>
                        <tn-title
                            title="车位满是否自动起闸"
                            mode="vLine"
                            sub-title="isPass"
                            assist-color="tn-blue" />
                    </template>
                    <tn-radio-group v-model="formData.isPass">
                        <tn-radio
                            v-for="(item, index) in Dict.dict.COMMON_YES_NO" :key="index"
                            :label="item.value"
                            >{{ item.label }}</tn-radio
                        >
                    </tn-radio-group>
                    <view class="tn-grey_text">默认:不自动放行</view>
                </tn-form-item>

                <tn-form-item prop="isPass">
                    <template #label>
                        <tn-title
                            title="设备离线提醒"
                            mode="vLine"
                            sub-title="isPass"
                            assist-color="tn-blue" />
                    </template>
                    <tn-input
                        v-model="formData.carPlate"
                        placeholder=""
                        :border="customStyleBorder"
                        :custom-style="customStyleInput"></tn-input>
                    <view class="tn-grey_text">默认:0(不开启)，建议设置5分钟，离线时长超出设置时间将通过微信公众号推送设备离线消息</view>
                </tn-form-item>

                <tn-form-item
                    prop="isPass"
                    class="tn-mt">
                    <template #label>
                        <tn-title
                            title="是否启用访客功能"
                            mode="vLine"
                            sub-title="isPass"
                            assist-color="tn-blue" />
                    </template>
                    <tn-radio-group v-model="formData.isPass">
                        <tn-radio
                            v-for="(item, index) in Dict.dict.COMMON_YES_NO" :key="index"
                            :label="item.value"
                            >{{ item.label }}</tn-radio
                        >
                    </tn-radio-group>
                    <view class="tn-grey_text">默认:否</view>
                </tn-form-item>
            </tn-form>

            <view class="tn-tabbar-height"></view>
        </view>
        <!-- 悬浮确认框 -->
        <view class="floating-button tn-flex justify-center"
            ><tn-button
                @click="confirmEdit"
                width="80%"
                size="xl"
                text-color="tn-white"
                bg-color="tn-gradient-bg__cool-8"
                >提 交</tn-button
            ></view
        >
        <!-- 选择器 -->
        <tn-picker
            v-model:open="openPickerVisible"
            :data="pickerData"
            @confirm="confirmPicker"
            @close="closePicker" />
    </view>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    import { onLoad } from "@dcloudio/uni-app";
    import cfsheep from "@/cfsheep";

    /** 页面初始化配置  */

    /* 1.字典数据 使用方式：【Dict.dict.字典名称】   为字典数据  【Dict.lable.字典名称[值]】 为获取字典文本 */
    const Dict = cfsheep.$store("dict");

    /* 2.表单配置处理-背景样式处理 */
    const customStyleInput = ref({ backgroundColor: "#ededed75" });
    const customStyleBorder = ref(false);
    /* 3.字典选择器使用  <tn-picker v-model:open="openPickerVisible" :data="pickerData" @confirm="confirmPicker" @close="closePicker" />*/

    // 字典处理-选择器key
    const pickerKey = ref("");
    // 字典处理-选择器数据
    const pickerData = ref([]);

    // 字典处理-控制选择器的可见性
    const openPickerVisible = ref(false);

    // 字典处理-打开选择器
    const openPicker = (type:string,dict:any) => {
        pickerKey.value = type;
        pickerData.value = dict;
        openPickerVisible.value = true; // 显示选择器
    };

    // 字典处理-关闭选择器
    const closePicker = () => {
        openPickerVisible.value = false; // 隐藏选择器
    };

    // 字典处理-确认选择器的选择
    const confirmPicker = (value) => {
        formData.value[pickerKey.value] = value;
        closePicker(); // 关闭选择器
    };


	/* ↓↓↓↓↓↓ 页面自定义逻辑处理 ↓↓↓↓↓↓*/


   // 表单数据模型
        const formData = ref({
           isPass: 1,
           carPlate: null, // 修改为车场编号
           noRenewal: null, // 修改为通讯码
           responsiblePerson: "", // 修改为负责人
           managementPhone: "", // 修改为管理处电话
   
           systemType: "", // 修改为系统类型
           totalParkingSpaces: "", // 修改为总停车位
           longitude: "", // 修改为经度
           latitude: "", // 修改为纬度
           province: "",
           city: "",
           district: "",
           address: "",
           remarks: "", // 修改为备注
       });
   const confirmEdit=() => {
   };
   
   
    onLoad(() => {});
</script>

<style scoped>
    :deep(.tn-radio-group) {
        justify-content: space-around;
    }

    .floating-button {
        position: fixed;
        /* 固定定位 */
        bottom: 20rpx;
        /* 距离底部20rpx */
        left: 0;
        /* 左对齐 */
        right: 0;
        /* 右对齐 */
        margin: 0 auto;
        /* 居中 */
    }
</style>
